import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import { Button, Col, Form, Input, Row, Space } from "antd";
import React, { useState } from "react";
import { MultipleSelectShop } from "./MultipleSelectShop";

/**
 * @description 选择店铺(单选/多选)
 * @param {boolean} props.multiple 是否多选，默认单选
 * @param {object} props.extraQuery 查询店铺的额外参数
 * @param {object} props.modalProps 弹窗的参数
 * @param {object} props.defaultValue 默认值
 * @param {function} props.onChange 数据回调函数
 */
const SelectShopModal = React.memo(props => {
	const {
		valueKey = "id",
		multiple,
		checkAuthTime = false,
		extraQuery,
		children,
		modalProps = {},
		defaultValue,
		onChange,
		...arg
	} = props;
	const [form] = Form.useForm();
	const [show, toggleShow] = useState(false);
	const [storeName, setStoreName] = useState("");
	const [shopOptions, setShopOptions] = useState([]);

	const handleSearch = () => {
		if (form.getFieldValue("storeName") === storeName) {
			return;
		}

		form.setFieldValue(valueKey, []);
		setStoreName(form.getFieldValue("storeName"));
	};

	return (
		<div {...arg}>
			<span
				onClick={() => {
					setStoreName("");
					form.setFieldValue("storeName", "");
					form.setFieldValue(valueKey, defaultValue || []);
					toggleShow(true);
				}}
			>
				{children}
			</span>

			<CommonModal
				title={{ title: modalProps.title || "选择平台店铺" }}
				{...modalProps}
				open={show}
				width={600}
				onCancel={() => toggleShow(false)}
				onOk={() => {
					const shopOptionsMap = shopOptions.reduce((acc, cur) => {
						acc[cur[valueKey]] = {
							...cur,
							value: cur[valueKey],
							label: cur.storeName,
							id: cur.id
						};
						return acc;
					}, {});

					const values = form.getFieldValue(valueKey);
					const storeList = Array.from(values || []).map(id => shopOptionsMap[id]);
					onChange && onChange(multiple ? storeList : storeList[0]);
					toggleShow(false);
				}}
			>
				<div style={{ overflow: "hidden auto", height: "60vh" }}>
					<CommonForm
						formProps={{
							form,
							initialValues: {
								[valueKey]: defaultValue || []
							}
						}}
						columns={[
							{
								block: (
									<Row gutter={14}>
										<Col flex="auto">
											<Form.Item name="storeName">
												<Input placeholder="请输入店铺" allowClear onPressEnter={handleSearch} />
											</Form.Item>
										</Col>
										<Col>
											<Space>
												<Button type="primary" onClick={handleSearch}>
													搜索
												</Button>
												<Button
													onClick={() => {
														form.setFieldValue("storeName", undefined);
														setStoreName(undefined);
													}}
													style={{ marginRight: 8 }}
												>
													重置
												</Button>
											</Space>
										</Col>
									</Row>
								)
							},
							{
								name: valueKey,
								slot: (
									<MultipleSelectShop
										valueKey={valueKey}
										storeName={storeName}
										extraQuery={extraQuery}
										multiple={multiple}
										onInit={setShopOptions}
										checkAuthTime={checkAuthTime}
									/>
								)
							}
						]}
					></CommonForm>
				</div>
			</CommonModal>
		</div>
	);
});
export default SelectShopModal;
